<template>
  <div class="accept_main" @keydown.enter.stop="onSearch">
    <slot name="headTop"></slot>
    <!-- 搜索框 -->
    <div class="accept_main_content">
      <!-- 操作栏 -->
      <div class="accept_main_content_operate">
        <div class="accept_main_content_operate_left">
          <!-- 更多操作自定义插槽 -->
          <slot name="headOperation"></slot>

          <!-- 输入框 -->
          <div class="accept_main_content_operate_left_search">
            <a-input
              v-if="showCaseNoQuery"
              size="large"
              v-model="searchVal"
              placeholder="请输入案号"
              class="accept_main_content_operate_left_search_customer"
            >
              <a-icon slot="suffix" @click="onSearch" type="search" :style="{ fontSize: '18px', color: '#d9d9d9' }" />
            </a-input>
            <!-- 多条件查询按钮 -->
            <slot name="headLeft"></slot>
            <!-- 展开框 -->
            <a-dropdown v-if="needMoreQuery" :trigger="['click']">
              <a class="ant-dropdown-link" style="min-width: 120px;display: flex;flex-direction: inherit;align-items: center;font-size: 16px;" @click="hide">
                展开查询条件
                <a-icon
                  class="rotate-element"
                  :class="{ rotated: isRotated }"
                  type="down"
                  :style="{ fontSize: '16px', marginLeft: '10px' }"
                />
              </a>
            </a-dropdown>
            <slot name="headCenter"></slot>
          </div>
        </div>
        <slot name="headRight"></slot>
      </div>

      <!-- 其他查询 -->
      <transition name="fade">
        <div class="accept_more_operate" v-show="isExpand">
          <div class="accept_more_operate_left">
            <slot name="more"></slot>
          </div>

          <div class="accept_more_operate_right">
            <a-button class="btn_primary_color accept_more_operate_right_submit" type="primary" @click="onQuery">
              查询
            </a-button>
            <a-button class="btn_normal_color accept_more_operate_right_reset" @click="onReset">
              重置
            </a-button>
          </div>
        </div>
      </transition>
      <!-- 分隔线 -->

      <!-- 表格 -->
      <div class="accept_main_content_table">
        <slot name="content"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 默认显示案号查询
    showCaseNoQuery: {
      type: Boolean,
      default: true,
      required: false
    },
    // 是否有其他条件查询
    needMoreQuery: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data () {
    return {
      searchVal: '', // 查询值
      isFirst: true,
      changeColumns: [],
      isExpand: false, // 展开查询
      isRotated: false // 控制旋转状态的数据属性
    }
  },
  components: {
  },
  computed: {},
  created () {},
  mounted () {},
  updated () {},
  methods: {
    hide () {
      this.isExpand = !this.isExpand
      this.isRotated = !this.isRotated // 切换旋转状态
      const acceptHeight = document.querySelector('.accept_more_operate')
      console.log(acceptHeight.offsetHeight)
      if (!this.isExpand) {
        this.$emit('myEvent', acceptHeight.offsetHeight)
      } else {
        this.$emit('myEvent', acceptHeight.offsetHeight)
      }
    },

    // 显示自定义表头组件
    showHeaderDef (e) {
      this.$refs.headerDefRef.f_init(e)
    },
    onSearch () {
      this.$emit('onSearch', this.searchVal)
    },
    onQuery () {
      this.$emit('onSearch', this.searchVal)
    },
    onReset () {
      this.$emit('onReset')
    }
  }
}
</script>
<style lang="scss" scoped>
.accept_main_content_operate_left_search > a {
  color: #000000 !important;
  opacity: 0.65;
  margin-left: 40px;
  width: 150px;
}
// 表格外边距显示分割线
::v-deep .ant-table {
  margin-top: 1px;
  margin-left: 20px !important;
}
// 表格头部背景色和高
::v-deep .ant-table-thead > tr > th {
  background-color: #fff;
  color: #666666;
  height: 50px !important;
}

::v-deep .accept_content_table .ant-table-column-title {
  font-size: 14px;
  font-family: 'PingFang-SC-Medium';
  font-weight: 600;
  color: #383636;
}

::v-deep .accept_content_table .ant-table-tbody > tr > td {
  font-size: 14px;
  font-family: 'PingFang-SC-Heavy';
  font-weight: 500;
  color: #504c4c;
  height: 50px;
}

// 设小滚动条高度表格线会对不齐
// ::v-deep ::-webkit-scrollbar {
//   margin-top: 6px !important;
//   height: 6px;
// }
::v-deep ::-webkit-scrollbar-track {
  border-radius: 2em;
}
// 滑块颜色
::v-deep ::-webkit-scrollbar-thumb {
  background-color: #cdcdcd !important;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.8s ease;
  max-height: 162px; /* 设置最大高度,根据实际需要调整 */
  overflow: hidden;
}

.fade-enter,
.fade-leave-to {
  // height: 0px !important;
  max-height: 0;
  opacity: 0.3;
  margin: 0;
}
.rotate-element {
  /* 旋转动画的过渡效果 */
  transition: transform 0.5s ease-in-out;
  /* 初始状态，不旋转 */
  transform: rotate(0deg);
}

.rotate-element.rotated {
  /* 旋转45度（或者其他你需要的角度） */
  transform: rotate(180deg);
}
</style>
